<template>
	<view style="display: flex;height: 1000px;">
		<view style="width: 50%;background:no-repeat center url('../../../static/image/home/login.png') ;">
			<!-- <image src="../../../static/image/home/login.png" style="width: 100%;height: 1000px;" ></image> -->
		</view>
		<view class="card-wrapper" style="display: flex;justify-content: center;align-items: center;">
			<view class="card-wrap">
				<view class="card-header" style="display: flex;">
					<view class="title" :class="loginMode==0?'active':''" @click="loginMode=0">手机登录/注册</view>
					<view class="title" :class="loginMode==1?'active':''" @click="loginMode=1"
						style="margin-left: 15px;">账号登录</view>
				</view>

				<!-- 账号密码登录 -->
				<block v-if="loginMode == 1">
					<!-- 登录表单 -->
					<form class="form form-password" @submit="accountLogin" @keydown.enter="accountLogin">
						<view class="form-item" style="border-radius: 10px;">
							<input class="input" placeholder="请输入用户名/手机号" maxlength="30" v-model="formData.account" />
						</view>
						<view class="form-item" style="border-radius: 10px;">
							<input class="input" placeholder="密码" maxlength="20" type="password"
								v-model="formData.password" />
							<view class="btn-send" @click="show=true">
								忘记密码
							</view>
						</view>
						<view
							style="display: flex;justify-content: flex-start;align-items: center;color: #282828;font-size: 24rpx;">
							<fui-radio-group name="radio" v-model="val" @change="change" style="margin-right: 16rpx;">
								<fui-radio value="1" checked></fui-radio>
							</fui-radio-group>
							我已阅读和同意<view style="color: #0033FF;padding: 0 5rpx 0 5rpx;">用户协议</view>和<view
								style="color: #0033FF;padding: 0 5rpx 0 5rpx;">隐私条款</view>
						</view>
						<button class="btn-primary" form-type="submit">确定</button>
					</form>
				</block>
				<!-- 短信验证码登录 -->
				<block v-else>
					<!-- 登录表单 -->
					<form class="form form-smscode" @submit="captchaLogin" @keydown.enter="captchaLogin">
						<view class="form-item" style="border-radius: 10px;">
							<view class="country-code">+86</view>
							<input class="input" placeholder="手机号" maxlength="11" type="number"
								v-model="formData.phone" />
						</view>
						<view class="form-item" style="border-radius: 10px;">
							<input class="input" placeholder="手机验证码" maxlength="6" type="number"
								v-model="formData.captcha" />
							<view class="btn-send" :class="{'disabled': sendCode.disabled}" @click="sendSMSCode">
								{{sendCode.text}}
							</view>
						</view>
						<view
							style="display: flex;justify-content: flex-start;align-items: center;color: #282828;font-size: 24rpx;">
							<fui-radio-group name="radio" v-model="val" @change="change" style="margin-right: 16rpx;">
								<fui-radio value="1" checked></fui-radio>
							</fui-radio-group>
							我已阅读和同意<view style="color: #0033FF;padding: 0 5rpx 0 5rpx;">用户协议</view>和<view
								style="color: #0033FF;padding: 0 5rpx 0 5rpx;">隐私条款</view>
						</view>
						<button class="btn-primary" form-type="submit">确定</button>
					</form>
				</block>

			</view>
		</view>

		<!-- 版权标识 -->
		<!-- <view class="copyright">小米公司版权所有-京公网安备xxxxxxxxx号</view> -->
		<fui-landscape :show="show" :closable="closable" @close="closePopup">
			<view class="fui-ani__box"
				style="background-color: #fff;border-radius: 28rpx;width: 850rpx;height: 1000rpx;">
				<view class="flex-center"
					style="height:120rpx;display: flex;justify-content: space-between;align-items: center;padding: 20rpx 40rpx 0 40rpx;">
					<view style="color: #000000;font-weight: bold;font-size: 48rpx;">重置密码</view>
					<image src="/static/image/publish/close.png" style="width:80rpx;" mode="widthFix"
						@click="closePopup">
					</image>
				</view>
				<view style="padding:30rpx;">
					<form class="form form-smscode" @submit="register" @keydown.enter="register">
						<view class="form-item" style="border-radius: 10px;">
							<view class="country-code">+86</view>
							<input class="input" placeholder="手机号" maxlength="11" type="number"
								v-model="ForgetformData.phone" />
						</view>
						<view class="form-item" style="border-radius: 10px;">
							<input class="input" placeholder="手机验证码" maxlength="6" type="number"
								v-model="ForgetformData.captcha" />
							<view class="btn-send" :class="{'disabled': sendCode.disabled}" @click="sendSMSCode1">
								{{sendCode.text}}
							</view>
						</view>
						<view class="form-item" style="border-radius: 10px;">
							<input class="input" placeholder="输入新密码" maxlength="6" type="number"
								v-model="ForgetformData.password" :password="password" />
							<view class="btn-send" style="border-left-width: 0px;" @click="changePwd">
								<image src="/static/image/home/hide.png" v-if="password" style="width: 30rpx;"
									mode="widthFix"></image>
								<image src="/static/image/home/show.png" v-if="!password" style="width: 30rpx;"
									mode="widthFix"></image>
							</view>
						</view>
						<view class="form-item" style="border-radius: 10px;">
							<input class="input" placeholder="确认新密码" maxlength="6" type="number"
								v-model="ForgetformData.password1" :password="password1" />
							<view class="btn-send" style="border-left-width: 0px;" @click="changePwd1">
								<image src="/static/image/home/hide.png" v-if="password1" style="width: 30rpx;"
									mode="widthFix"></image>
								<image src="/static/image/home/show.png" v-if="!password1" style="width: 30rpx;"
									mode="widthFix"></image>
							</view>
						</view>
						<button class="btn-primary" form-type="submit">确定</button>
						<view style="color: #0033FF;padding: 0 5rpx 0 5rpx;text-align: center;" @click="show=false">
							取消重置密码</view>
					</form>
				</view>
			</view>
		</fui-landscape>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginMode: 0,
				show: false,
				closable: false,
				formData: {
					account: '',
					password: '',
					phone: '',
					captcha: ''
				},
				password1: true,
				password: true,
				ForgetformData: {
					password1: '',
					password: '',
					phone: '',
					captcha: ''
				},
				val: [],
				sendCode: {
					text: '获取验证码',
					disabled: false
				}
			}
		},
		onLoad(e) {
			if (e.callbackUrl) this.callbackUrl = e.callbackUrl;
		},
		methods: {
			changePwd() {
				this.password = !this.password
			},
			changePwd1() {
				this.password1 = !this.password1
			},
			closePopup() {
				this.show = false
			},
			change(e) {
				console.log(e)
			},
			check: function() {
				const that = this;
				this.$util.request("/api/v1/messagecode/check?phone=" + this.ForgetformData.phone + "&code=" +
					this.ForgetformData.captcha, {}, (res) => {
						if (res.data) {
						} else {
							uni.showToast({
								title: "验证码错误",
								icon: 'none'
							})
							return false
						}
					}, true);
			},
			register: function() {
				if (!this.ForgetformData.captcha) {
					uni.showToast({
						title: "验证码不能为空",
						icon: 'none'
					})
					return
				}
				this.check();
				if (!this.ForgetformData.password) {
					uni.showToast({
						title: "密码不能为空",
						icon: 'none'
					})
					return
				}

				if (this.ForgetformData.password != this.ForgetformData.password1) {
					uni.showToast({
						title: "密码不一致",
						icon: 'none'
					})
					return
				}

				const url = getApp().globalData.apiUrl + "/api/v1/user/updatePassword";
				const that = this;
				uni.showLoading({
					title: '修改中...',
					mask: true
				});
				console.log(this.formData)
				this.$util.request('/api/v1/user/updatePassword', {
					password: this.ForgetformData.password,
					name: '',
					phone: this.ForgetformData.phone
				}, (res) => {
					console.log(res)
					if (res.code == 0) {
						uni.showToast({
							icon: 'success',
							title: "修改成功"
						})

					} else {
						uni.showToast({
							icon: 'error',
							title: res.message
						})
					}
				},true,'PUT');
			},
			accountLogin() {
				const {
					account,
					password
				} = this.formData;
				if (!this.$regular.phoneNumber.test(account) && !this.$regular.email.test(account)) {
					return this.$util.showErrorMsg('请输入正确的账号');
				}
				if (!password) {
					return this.$util.showErrorMsg('请输入正确的密码');
				}

				uni.showLoading({
					title: '登录中...',
					mask: true
				});
				console.log(this.formData)
				this.$util.request('/api/v1/user/login', {
					name: account,
					password: password
				}, (res) => {
					console.log(res)
					uni.hideLoading();
					if (res.code == 0) {
						uni.setStorageSync("token", res.data.token)
						uni.setStorageSync("name", res.data.name)
						uni.setStorageSync("avator", res.data.avator)
						uni.setStorageSync("level", res.data.level)
						uni.setStorageSync("vipName", res.data.vipName)
						uni.setStorageSync("vipNum", res.data.vipNum)
						uni.setStorageSync("vipTime", res.data.vipTime)
						uni.setStorageSync("productNum", res.data.productNum)
						uni.setStorageSync("fansNum", res.data.fansNum)
						uni.setStorageSync("commetNum", res.data.commetNum)
						uni.setStorageSync("loveNum", res.data.loveNum)
						uni.setStorageSync("info", res.data)
						this.loginSuccess(res.data);
						// 	if (that.callbackUrl) {
						// 		uni.navigateTo({
						// 			url: that.callbackUrl
						// 		})
						// 	} else {
						// 		uni.switchTab({
						// 			url: "/pages/Mine/Mine"
						// 		})

						// 	}
					} else {
						console.log(res.message)
						this.$util.showErrorMsg(res.message);
					}
				});
			},
			sendSMSCode() {
				if (this.sendCode.disabled) return;
				if (!this.$regular.phoneNumber.test(this.formData.phone)) {
					return this.$util.showErrorMsg('请输入正确的手机号');
				}

				this.sendCode.disabled = true;
				this.sendCode.text = '发送中...';

				new Promise((resolve, reject) => {
					this.$util.request('/api/v1/messagecode', {
						phone: this.formData.phone
					}, (res) => {
						if (res.code == 0) {
							resolve();
						} else {
							reject(res.message);
						}
					});
				}).then(() => {
					let seconds = 60;
					const timer = setInterval(() => {
						if (seconds <= 0) {
							clearInterval(timer);
							this.sendCode.disabled = false;
							this.sendCode.text = '重新发送';
						} else {
							this.sendCode.text = `重新发送（${seconds}）`;
							seconds--;
						}
					}, 1000);
				}).catch(e => {
					this.$util.showErrorMsg(e);

					this.sendCode.disabled = false;
					this.sendCode.text = '重新发送';
				});
			},
			sendSMSCode1() {
				if (this.sendCode.disabled) return;
				if (!this.$regular.phoneNumber.test(this.ForgetformData.phone)) {
					return this.$util.showErrorMsg('请输入正确的手机号');
				}

				this.sendCode.disabled = true;
				this.sendCode.text = '发送中...';

				new Promise((resolve, reject) => {
					this.$util.request('/api/v1/messagecode', {
						phone: this.ForgetformData.phone
					}, (res) => {
						if (res.code == 0) {
							resolve();
						} else {
							reject(res.message);
						}
					});
				}).then(() => {
					let seconds = 60;
					const timer = setInterval(() => {
						if (seconds <= 0) {
							clearInterval(timer);
							this.sendCode.disabled = false;
							this.sendCode.text = '重新发送';
						} else {
							this.sendCode.text = `重新发送（${seconds}）`;
							seconds--;
						}
					}, 1000);
				}).catch(e => {
					this.$util.showErrorMsg(e);

					this.sendCode.disabled = false;
					this.sendCode.text = '重新发送';
				});
			},
			captchaLogin(e) {
				const {
					phone,
					captcha
				} = this.formData;
				if (!this.$regular.phoneNumber.test(phone)) {
					return this.$util.showErrorMsg('请输入正确的手机号');
				}
				if (!captcha) {
					return this.$util.showErrorMsg('请输入正确的验证码');
				}

				uni.showLoading({
					title: '登录中...',
					mask: true
				});
				this.$util.request('/api/v1/user/login/phone', {
					phone: phone,
					code: captcha
				}, (res) => {
					if(res.code==0){
						uni.hideLoading();
						uni.setStorageSync("token", res.data.token)
						uni.setStorageSync("name", res.data.name)
						uni.setStorageSync("avator", res.data.avator)
						uni.setStorageSync("level", res.data.level)
						uni.setStorageSync("vipName", res.data.vipName)
						uni.setStorageSync("vipNum", res.data.vipNum)
						uni.setStorageSync("vipTime", res.data.vipTime)
						uni.setStorageSync("productNum", res.data.productNum)
						uni.setStorageSync("fansNum", res.data.fansNum)
						uni.setStorageSync("commetNum", res.data.commetNum)
						uni.setStorageSync("loveNum", res.data.loveNum)
						uni.setStorageSync("info", res.data)
						this.loginSuccess(res.data);
					}else{
						return this.$util.showErrorMsg('验证码错误');
					}
				});
			},
			loginSuccess(loginUser) {
				this.$store.commit('login', loginUser);
				// this.$cart.syncCart();

				uni.redirectTo({
					url: this.callbackUrl || '/pages/index'
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $bg-color-grey;
	}

	.form {
		display: block;
		margin: 22px auto;

		.form-item {
			@extend %flex-align-center;
			height: 50px;
			line-height: 50px;
			margin-bottom: 14px;
			border: 1px solid $border-color;

			.input {
				flex: 1;
				height: 50px;
				line-height: 50px;
				padding: 0 14px;
				color: $text-color;
			}
		}

		&.form-smscode {
			.country-code {
				width: 60px;
				height: 50px;
				line-height: 50px;
				color: $text-color;
				text-align: center;
				border-right: 1px solid $border-color;
			}

			.btn-send {
				height: 100rpx;
				line-height: 100rpx;
				padding: 0 30rpx;
				color: #3D3D3D;
				cursor: pointer;
				text-align: center;
				border-left: 1px solid $border-color;
				font-size: 24rpx;

				&.disabled {
					cursor: default;
					color: #757575;
				}
			}
		}

		.btn-primary {
			background-color: #0033FF;
			height: 50px;
			border-radius: 30px;
			line-height: 50px;
			margin-bottom: 14px;
			color: #fff;
			cursor: pointer;
			font-size: 36rpx;
			margin-top: 50rpx
		}
	}

	.card-wrapper {
		background-color: $bg-color;
		width: 50%;
		// margin: 80px auto;
		overflow: hidden;

		.card-wrap {
			width: 356px;
			margin: 40px auto 80px;

			.card-header {
				text-align: center;

				.logo {
					width: 60px;
					height: 60px;
					border-radius: 2px;
				}

				.title {
					font-size: 24px;
					color: $text-color;
					padding-top: 22px;
				}

				.active {
					color: #3D3D3D;
					font-weight: 900;
				}
			}

			.btn-send {
				height: 100rpx;
				line-height: 100rpx;
				padding: 0 30rpx;
				color: #3D3D3D;
				cursor: pointer;
				text-align: center;
				border-left: 1px solid $border-color;
				font-size: 24rpx;

				&.disabled {
					cursor: default;
					color: #757575;
				}
			}



			.card-footer {
				@extend %flex-align-center;
				justify-content: space-between;

				.login-mode {
					color: $color-primary;
					cursor: pointer;
				}

				.links {
					@extend %flex-align-center;

					.link {
						color: #757575;
						cursor: pointer;

						&:hover {
							color: $color-primary;
						}
					}

					.separator {
						margin: 0 5px;
						color: $border-color;
					}
				}
			}
		}
	}

	.copyright {
		position: fixed;
		bottom: 20px;
		left: 0;
		right: 0;
		padding: 10px;
		color: #757575;
		text-align: center;
	}
</style>